export const Center = () => {
    return (
        <div className="login-box">
            <div className="tree">
                <img src={imgUrl.logoPlant} className="img-fluid" />
            </div>
            <div className="slogan">
                安全无小事<br /><span className="yellow">管理</span>少事故
                    </div>
            <div id="earth" className="earth">
                <img src={imgUrl.logoPeopleUrl} className="img-fluid" />
            </div>

            <div className="login">
                <div className="login-logo">
                    <img src={imgUrl.logoUrl} className="img-fluid" />
                </div>
                <div className="login-other">
                    <div onclick='toQzoneLogin()'><img src={imgUrl.logoIconQQ} /></div>
                    <div onclick='toweChat()'><img src={imgUrl.logoIconChart} /></div>
                    <div><img src={imgUrl.logoIconSine} /></div>
                </div>
                <div className="hr"><span>或</span></div>
                <div className="login-form">
                    <form method="POST">
                        <code className="check_log_phone"></code>
                        <div className="input-group mb-3">
                            <div className="input-group-prepend">
                                <span className="input-group-text">
                                    <span className="fa fa-user-circle-o text-success"></span>
                                </span>
                            </div>
                            <input type="text" className="form-control" id="logphone" placeholder="手机号码" />
                        </div>
                        <code className="check_log_pwd"></code>
                        <div className="input-group mb-3">
                            <div className="input-group-prepend">
                                <span className="input-group-text">
                                    <span className="fa fa-unlock text-success"></span>
                                </span>
                            </div>
                            <input type="password" className="form-control" id="logpwd" placeholder="密码" />
                        </div>
                        <button type="button" id="login" className="btn btn-success btn-block">登录</button>
                    </form>
                </div>
                <div className="login-regist">
                    没有帐号？<span id="ToRegist">立即注册</span>
                </div>
            </div>

            <div className="regist">
                <div className="regist-title">
                    手机注册<span><img src={imgUrl.logoUrl} height="40px" /></span>
                </div>
                <div className="regist-form">
                    <form method="POST" action="">
                        <code className="check_reg_phone"></code>
                        <div className="input-group mb-3">
                            <div className="input-group-prepend">
                                <span className="input-group-text">
                                    <span className="fa fa-mobile text-success"></span>
                                </span>
                            </div>
                            <input type="text" className="form-control" name="regphone" id="regphone" placeholder="手机号码" />
                        </div>
                        <code className="check_reg_pwd"></code>
                        <div className="input-group mb-3">
                            <div className="input-group-prepend">
                                <span className="input-group-text">
                                    <span className="fa fa-unlock-alt text-success"></span>
                                </span>
                            </div>
                            <input type="password" className="form-control" name="regpwd" id="regpwd" placeholder="密码" />
                        </div>
                        <code className="check_reg_pwd2"></code>
                        <div className="input-group mb-3">
                            <div className="input-group-prepend">
                                <span className="input-group-text">
                                    <span className="fa fa-unlock-alt text-success"></span>
                                </span>
                            </div>
                            <input type="password" className="form-control" id="regcheckpwd" placeholder="确认密码" />
                        </div>
                        <code className="check_reg_code"></code>
                        <div className="input-group mb-3">
                            <input type="text" className="form-control" placeholder="手机验证码" id="code" name="code" />
                            <div className="input-group-append">
                                <button type="button" className="input-group-text text-success getcode">获取验证码</button>
                            </div>
                        </div>
                        <button type="button" id="regist" className="btn btn-success btn-block">注册</button>
                    </form>
                </div>
                <div className="otherLogin">
                    <div className="qq">
                        <img src={imgUrl.logoQQ} onclick='toQzoneLogin()' className="img-fluid" />
                    </div>
                    <div className="wx">
                        <img src={imgUrl.logoChart} onclick='toweChat()' className="img-fluid" />
                    </div>
                </div>
                <div className="login-login">
                    <span id="otherLogin">快捷登录</span>
                    <span id="phoneLogin">手机注册</span>
                    <span id="ToLogin">返回登录</span>
                </div>
            </div>
            <div class="box-bg">
                <div class="box">
                    <img src={imgUrl.logoCheckCw} class="cuo" />
                    <span class="top-s">身份验证</span>
                    <span class="top-x">拖动滑块，使图片角度为正</span>
                    <div id="rotateWrap1">
                        <div class="rotateverify-contaniner">
                            <div class="rotate-can-wrap">
                                <canvas class="rotateCan rotate-can" width="200" height="200"></canvas>
                                <div class="statusBg status-bg"></div>
                            </div>
                            <div class="control-wrap slideDragWrap">
                                <div class="control-tips">
                                    <p class="c-tips-txt cTipsTxt">滑动将图片转正</p>
                                </div>
                                <div class="control-bor-wrap controlBorWrap"></div>
                                <div class="control-btn slideDragBtn">
                                    <i class="control-btn-ico"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}